<template>
  <h3>用户管理</h3>
  <el-tabs type="border-card">
    <el-tab-pane label="在线用户">
      <onlineUser/>
    </el-tab-pane>

    <el-tab-pane label="所有用户">
      <el-button @click="newOn = true">新增</el-button>
      <allUser/>
    </el-tab-pane>
    <el-dialog v-model="newOn" title="新增用户" style="width: 30%">
      <el-form v-model="form"  :ref="from" label-width="120px">
        <el-form-item label="用户名称" prop="user_name">
          <el-input v-model="form.user_name" autocomplete="off" placeholder="请输入名称" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="用户手机号" prop="phone_number">
          <el-input v-model="form.phone_number" autocomplete="off" placeholder="请输入手机号(长度为11位)" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" placeholder="密码" autocomplete="off" v-model="form.password" style="width: 200px" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role" autocomplete="off" placeholder="请选择角色">
            <el-option label="程序开发者" value="1" />
            <el-option label="管理员" value="2" />
            <el-option label="会员用户" value="3" />
            <el-option label="普通用户" value="4" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="newOn = false">取消</el-button>
        <el-button type="primary" @click="newUser">
          创建
        </el-button>
      </span>
      </template>
    </el-dialog>
  </el-tabs>

</template>

<script>
import allUser from './allUser/index.vue'
import onlineUser from './onlineUser/index.vue'
import {ElMessage} from "element-plus";
import axios from "axios";
export default {
  data(){
    return{
      newOn : false,
      newMsg : null,
      form : {
        user_name : null,
        phone_number : null,
        password : null,
        role : null,
      }

    }
  },
  methods:{
    newUser(){
      if(this.form.user_name == null || this.form.role == null || this.form.password == null || this.form.phone_number == null){
        ElMessage.warning("不能有空字段")
        return
      }else if(this.form.phone_number.length != 11){
        ElMessage.warning("电话号码需11位")
        return
      }else {

        axios({
          method:"POST",
          url:"http://39.101.199.5:8888/SuJiWords/user/createUser",
          data: JSON.stringify({"user_name":this.form.user_name,"phone_number":this.form.phone_number,"password":this.form.password,"role":this.form.role}),
          headers:{'Content-Type':'application/json;charser=UTF-8'}
        }).then(response =>(ElMessage.success(response.data.msg)))
        this.newOn = false
        this.form.user_name = null,
        this.form.role = null,
        this.form.password = null,
        this.form.phone_number = null
      }

    }
  },
  components:{
    allUser,
    onlineUser
  }
}

</script>

<style scoped>

</style>